<link rel="stylesheet" href="/shop/templates/tp1/css/floor.css">
<div class="floors" ms-controller="floor">
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(1)" title="4,根据货品ID">楼层样式1</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(2)" title="上2下3">楼层样式2</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(3)" title="2*2*2*2*4">楼层样式3</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(4)" title="4*n商品列表">楼层样式4</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(5)" title="单一横幅图片">楼层样式5</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(6)" title="1*2*2*2">楼层样式6</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(7)" title="2*2*1*1*1">楼层样式7</a>
    <a href="javascript:;" class="btn add_floor_btn" ms-click="add_floor(8)" title="(1-3)*2*2*2">楼层样式8</a>
    <a href="javascript:" class="btn add_floor_btn"  ms-click="add_floor(9)" title="限添加一层。多添加只会重复显示">新上架商品层</a>

    <div class="floor_box" id="floor_box">
        <div class="head">
            <a href="javascript:" ms-repeat="items" onclick="toggle($(this))" ms-class="selected : el.show == 1">{{$index + 1}}楼</a>
        </div>

        <div class="floor" ms-repeat="items" ms-visible="el.show == 1">
            <div>
                <a href="javascript:;" class="btn remove" ms-click="$remove" style="background-color: red;">删除</a>
            </div>
            <div class="head">
                <span> 楼层名字：<input type="text" ms-attr-data="{{el.floor_name}}" ms-duplex="el.floor_name" data-duplex-event="change"> </span>
                <span> 查看全部链接： <input type="text" ms-attr-data="{{el.all_link}}" ms-duplex="el.all_link" data-duplex-event="change"> </span>
                <span> 小链接(以半角逗号分开）： <input type="text" ms-attr-data="{{el.short_link}}" ms-duplex="el.short_link" data-duplex-event="change"> </span>
            </div>

            <section ms-if="el.style == 1" class="floor_type1">
                <br>
                <p> 请填写要展示的商品ID，可在商品管理中的"平台货号"查看 </p>
                <br>

                <span> 商品1：<input type="text" ms-duplex="el.g1"> </span>
                <span> 商品2：<input type="text" ms-duplex="el.g2"> </span>
                <span> 商品3：<input type="text" ms-duplex="el.g3"> </span>
                <span> 商品4：<input type="text" ms-duplex="el.g4"> </span>
            </section>

            <section ms-if="el.style == 2" class="floor_type2">
                <div>
                    <img class="type2-top-img"
                         ms-attr-link="el.img1.link"
                         ms-attr-src="el.img1.pic" alt="">
                    <img class="type2-top-img"
                         ms-attr-link="el.img2.link"
                         ms-attr-src="el.img2.pic" alt="">
                </div>
                <div>
                    <img class="type2-bottom-img"
                         ms-attr-link="el.img3.link"
                         ms-attr-src="el.img3.pic" alt="">
                    <img class="type2-bottom-img"
                         ms-attr-link="el.img4.link"
                         ms-attr-src="el.img4.pic" alt="">
                    <img class="type2-bottom-img"
                         ms-attr-link="el.img5.link"
                         ms-attr-src="el.img5.pic" alt="">
                </div>

            </section>

            <section ms-if="el.style == 3" class="floor_type3">
                <table>
                    <tr>
                       <td rowspan="2">
                           <img class="type3_style1"
                                ms-attr-link="el.img1.link"
                                ms-attr-src="el.img1.pic"
                                ms-attr-goods_name="el.img1.goods_name"
                                ms-attr-des="el.img1.des"
                                ms-attr-price="el.img1.price"
                           >
                           <img class="type3_style3"
                                ms-attr-link="el.img2.link"
                                ms-attr-src="el.img2.pic"
                                ms-attr-goods_name="el.img2.goods_name"
                                ms-attr-des="el.img2.des"
                                ms-attr-price="el.img2.price"
                           >
                       </td>
                        <td>
                            <img class="type3_style2" alt=""
                                 ms-attr-link="el.img3.link"
                                 ms-attr-src="el.img3.pic"
                                 ms-attr-goods_name="el.img3.goods_name"
                                 ms-attr-des="el.img3.des"
                                 ms-attr-price="el.img3.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style2"
                                 ms-attr-link="el.img4.link"
                                 ms-attr-src="el.img4.pic"
                                 ms-attr-goods_name="el.img4.goods_name"
                                 ms-attr-des="el.img4.des"
                                 ms-attr-price="el.img4.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style2"
                                 ms-attr-link="el.img5.link"
                                 ms-attr-src="el.img5.pic"
                                 ms-attr-goods_name="el.img5.goods_name"
                                 ms-attr-des="el.img5.des"
                                 ms-attr-price="el.img5.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style3"
                                 ms-attr-link="el.img6.link"
                                 ms-attr-src="el.img6.pic"
                                 ms-attr-goods_name="el.img6.goods_name"
                                 ms-attr-des="el.img6.des"
                                 ms-attr-price="el.img6.price"
                            >
                            <img class="type3_style3"
                                 ms-attr-link="el.img7.link"
                                 ms-attr-src="el.img7.pic"
                                 ms-attr-goods_name="el.img7.goods_name"
                                 ms-attr-des="el.img7.des"
                                 ms-attr-price="el.img7.price"
                            >
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img class="type3_style2"
                                 ms-attr-link="el.img8.link"
                                 ms-attr-src="el.img8.pic"
                                 ms-attr-goods_name="el.img8.goods_name"
                                 ms-attr-des="el.img8.des"
                                 ms-attr-price="el.img8.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style2"
                                 ms-attr-link="el.img9.link"
                                 ms-attr-src="el.img9.pic"
                                 ms-attr-goods_name="el.img9.goods_name"
                                 ms-attr-des="el.img9.des"
                                 ms-attr-price="el.img9.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style2"
                                 ms-attr-link="el.img10.link"
                                 ms-attr-src="el.img10.pic"
                                 ms-attr-goods_name="el.img10.goods_name"
                                 ms-attr-des="el.img10.des"
                                 ms-attr-price="el.img10.price"
                            >
                        </td>
                        <td>
                            <img class="type3_style3"
                                 ms-attr-link="el.img11.link"
                                 ms-attr-src="el.img11.pic"
                                 ms-attr-goods_name="el.img11.goods_name"
                                 ms-attr-des="el.img11.des"
                                 ms-attr-price="el.img11.price"
                            >
                            <img class="type3_style4"
                                 ms-attr-link="el.img12.link"
                                 ms-attr-src="el.img12.pic"
                                 ms-attr-goods_name="el.img12.goods_name"
                                 ms-attr-des="el.img12.des"
                                 ms-attr-price="el.img12.price"
                            >
                        </td>
                    </tr>
                </table>

            </section>

            <section ms-if="el.style == 4" class="floor_type4" style="overflow: hidden;">
                <a href="javascript:;" ms-click="add_goods(el.goods)" class="btn">添加商品</a>
                <ul>
                    <li class="type4_style1" ms-repeat-goods="el.goods">
                        <img ms-attr-src="goods.pic" ms-attr-goods_name="goods.goods_name" ms-attr-link="goods.link" ms-attr-price="goods.price" alt="">
                        <a href="javscript:;" class="btn" ms-click="$remove">删除</a>
                    </li>
                </ul>
            </section>

            <section ms-if="el.style == 5" class="floor_type5" style="overflow: hidden;">
                <img ms-attr-src="el.img.pic" ms-attr-link="el.img.link" alt="">
            </section>

            <section ms-if="el.style == 6" class="floor_type6">
                <table>
                    <tr>
                        <td rowspan="2">
                            <img class="type6_style1"
                                 ms-attr-link="el.img1.link"
                                 ms-attr-src="el.img1.pic"
                                 ms-attr-goods_name="el.img1.goods_name"
                                 ms-attr-des="el.img1.des"
                                 ms-attr-price="el.img1.price"
                            >
                        </td>
                        <td>
                            <img class="type6_style2"
                                 ms-attr-link="el.img2.link"
                                 ms-attr-src="el.img2.pic"
                                 ms-attr-goods_name="el.img2.goods_name"
                                 ms-attr-des="el.img2.des"
                                 ms-attr-price="el.img2.price"
                            >
                            <img class="type6_style2" alt=""
                                 ms-attr-link="el.img3.link"
                                 ms-attr-src="el.img3.pic"
                                 ms-attr-goods_name="el.img3.goods_name"
                                 ms-attr-des="el.img3.des"
                                 ms-attr-price="el.img3.price"
                            >
                        </td>
                        <td>
                            <img class="type6_style2"
                                 ms-attr-link="el.img4.link"
                                 ms-attr-src="el.img4.pic"
                                 ms-attr-goods_name="el.img4.goods_name"
                                 ms-attr-des="el.img4.des"
                                 ms-attr-price="el.img4.price"
                            >
                            <img class="type6_style2"
                                 ms-attr-link="el.img5.link"
                                 ms-attr-src="el.img5.pic"
                                 ms-attr-goods_name="el.img5.goods_name"
                                 ms-attr-des="el.img5.des"
                                 ms-attr-price="el.img5.price"
                            >
                        </td>

                        <td>
                            <img class="type6_style2"
                                 ms-attr-link="el.img6.link"
                                 ms-attr-src="el.img6.pic"
                                 ms-attr-goods_name="el.img6.goods_name"
                                 ms-attr-des="el.img6.des"
                                 ms-attr-price="el.img6.price"
                            >
                            <img class="type6_style2"
                                 ms-attr-link="el.img7.link"
                                 ms-attr-src="el.img7.pic"
                                 ms-attr-goods_name="el.img7.goods_name"
                                 ms-attr-des="el.img7.des"
                                 ms-attr-price="el.img7.price"
                            >
                        </td>
                    </tr>

                </table>

            </section>

            <section ms-if="el.style == 7" class="floor_type7">
                <table>
                    <tr>
                        <td rowspan="2">
                            <img class="type7_style1"
                                 ms-attr-link="el.img1.link"
                                 ms-attr-src="el.img1.pic"
                                 ms-attr-goods_name="el.img1.goods_name"
                                 ms-attr-des="el.img1.des"
                                 ms-attr-price="el.img1.price"
                            >
                            <img class="type7_style1"
                                 ms-attr-link="el.img2.link"
                                 ms-attr-src="el.img2.pic"
                                 ms-attr-goods_name="el.img2.goods_name"
                                 ms-attr-des="el.img2.des"
                                 ms-attr-price="el.img2.price"
                            >
                        </td>
                        <td>

                            <img class="type7_style1" alt=""
                                 ms-attr-link="el.img3.link"
                                 ms-attr-src="el.img3.pic"
                                 ms-attr-goods_name="el.img3.goods_name"
                                 ms-attr-des="el.img3.des"
                                 ms-attr-price="el.img3.price"
                            >
                            <img class="type7_style1"
                                 ms-attr-link="el.img4.link"
                                 ms-attr-src="el.img4.pic"
                                 ms-attr-goods_name="el.img4.goods_name"
                                 ms-attr-des="el.img4.des"
                                 ms-attr-price="el.img4.price"
                            >
                        </td>
                        <td>
                            <img class="type7_style2"
                                 ms-attr-link="el.img5.link"
                                 ms-attr-src="el.img5.pic"
                                 ms-attr-goods_name="el.img5.goods_name"
                                 ms-attr-des="el.img5.des"
                                 ms-attr-price="el.img5.price"
                            >
                        </td>
                        <td>
                            <img class="type7_style2"
                                 ms-attr-link="el.img6.link"
                                 ms-attr-src="el.img6.pic"
                                 ms-attr-goods_name="el.img6.goods_name"
                                 ms-attr-des="el.img6.des"
                                 ms-attr-price="el.img6.price"
                            >
                        </td>
                        <td>

                            <img class="type7_style2"
                                 ms-attr-link="el.img7.link"
                                 ms-attr-src="el.img7.pic"
                                 ms-attr-goods_name="el.img7.goods_name"
                                 ms-attr-des="el.img7.des"
                                 ms-attr-price="el.img7.price"
                            >
                        </td>
                    </tr>

                </table>

            </section>

            <section ms-if="el.style == 8" class="floor_type8" style="overflow: hidden;">
                <table>
                    <tr>
                        <td>
                            <table class="switch-box">
                                <tr>
                                    <td>
                                        <a href="javascript:;" ms-click="add_goods(el.imgs1)" class="btn">添加商品</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="switch">
                                        <a  href="javascipt:"  ms-repeat-goods="el.imgs1" ms-click="toggle_imgs1(el.imgs1,$index)" ms-class="selected : goods.show == 1">商品{{$index + 1}}</a>
                                    </td>

                                </tr>
                                <tr>
                                    <td ms-repeat-goods="el.imgs1" ms-visible="goods.show == 1">
                                        <img class="type8_style1" ms-attr-src="goods.pic" ms-attr-goods_name="goods.goods_name" ms-attr-link="goods.link" ms-attr-price="goods.price" ms-attr-show="goods.show"  alt="">
                                        <a href="javscript:;" class="btn" ms-click="$remove">删除</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td>
                            <img class="type8_style2"
                                 ms-attr-link="el.img1.link"
                                 ms-attr-src="el.img1.pic"
                                 ms-attr-goods_name="el.img1.goods_name"
                                 ms-attr-des="el.img1.des"
                                 ms-attr-price="el.img1.price">
                            <img class="type8_style2"
                                 ms-attr-link="el.img2.link"
                                 ms-attr-src="el.img2.pic"
                                 ms-attr-goods_name="el.img2.goods_name"
                                 ms-attr-des="el.img2.des"
                                 ms-attr-price="el.img2.price">
                        </td>
                        <td>
                            <img class="type8_style2"
                                 ms-attr-link="el.img3.link"
                                 ms-attr-src="el.img3.pic"
                                 ms-attr-goods_name="el.img3.goods_name"
                                 ms-attr-des="el.img3.des"
                                 ms-attr-price="el.img3.price">
                            <img class="type8_style2"
                                 ms-attr-link="el.img4.link"
                                 ms-attr-src="el.img4.pic"
                                 ms-attr-goods_name="el.img4.goods_name"
                                 ms-attr-des="el.img4.des"
                                 ms-attr-price="el.img4.price">
                        </td>
                        <td>
                            <img class="type8_style2"
                                 ms-attr-link="el.img5.link"
                                 ms-attr-src="el.img5.pic"
                                 ms-attr-goods_name="el.img5.goods_name"
                                 ms-attr-des="el.img5.des"
                                 ms-attr-price="el.img5.price">
                            <img class="type8_style2"
                                 ms-attr-link="el.img6.link"
                                 ms-attr-src="el.img6.pic"
                                 ms-attr-goods_name="el.img6.goods_name"
                                 ms-attr-des="el.img6.des"
                                 ms-attr-price="el.img6.price">
                        </td>
                        <td>
                            <img class="type8_style2"
                                 ms-attr-link="el.img7.link"
                                 ms-attr-src="el.img7.pic"
                                 ms-attr-goods_name="el.img7.goods_name"
                                 ms-attr-des="el.img7.des"
                                 ms-attr-price="el.img7.price">
                            <img class="type8_style2"
                                 ms-attr-link="el.img8.link"
                                 ms-attr-src="el.img8.pic"
                                 ms-attr-goods_name="el.img8.goods_name"
                                 ms-attr-des="el.img8.des"
                                 ms-attr-price="el.img8.price">
                        </td>
                    </tr>
                </table>


            </section>
            <section ms-if="el.style == 9" class="floor_type8" style="overflow: hidden;">
                前台ajax调用(重复添加会重复显示),不需配置商品信息
            </section>

        </div>
    </div>
</div>


<?php
    if (!is_array($items)) { $items = array(); }
?>
<script>
    var floors = avalon.define({
        $id: 'floor',
        floor_type: '',
        items: [],
        // toggle : function (index) {
        //     for(var i = 0; i < floors.items.length; i++) {
        //         console.log(i);
        //         if(i == index){
        //             floors.items[i].show = 1;
        //         }
        //         else{
        //             floors.items[i].show = 0
        //         }
        //     }
        // },
        toggle_imgs1 : function (item,index) {
            console.log(item);
            for(var i = 0; i < item.length; i++) {
                if(i == index){
                    item[i].show = 1;
                }
                else{
                    item[i].show = 0
                }
            }
        },
        add_floor: function (floor) {
            var obj = {
                style      : floor,
                floor_name : '',
                all_link   : '',
                short_link : '',
                show       : 0
            };
            if (floor == 1) {
                obj.g1 = '';
                obj.g2 = '';
                obj.g3 = '';
                obj.g4 = '';
                floors.items.push(obj);
            } else if (floor == 2) {
                for(var $i = 1; $i <= 5; $i++) {
                    obj['img' + $i] = {
                        pic : '/data/upload/shop/common/default_goods_image.gif',
                        link : ''
                    }
                }
                floors.items.push(obj);
            } else if(floor == 3){
                for(var $i = 1; $i <= 12; $i++) {
                    obj['img' + $i] = {
                        pic : '/data/upload/shop/common/default_goods_image.gif',
                        link:'',
                        goods_name:'',
                        des:'',
                        price:''
                    }
                }
                floors.items.push(obj);
            } else if (floor == 4) {
                obj.goods = []
                floors.items.push(obj);
            } else if(floor == 5){
                obj.img = {
                    pic : '/data/upload/shop/common/default_goods_image.gif',
                    link: ''
                };
                floors.items.push(obj);
            }else if(floor == 6 || floor == 7){

                for(var $i = 1; $i <= 7; $i++) {
                    obj['img' + $i] = {
                        pic : '/data/upload/shop/common/default_goods_image.gif',
                        link:'',
                        goods_name:'',
                        des:'',
                        price:''
                    }
                }
                floors.items.push(obj);
            }else if(floor == 8){
                obj.imgs1 = [];
                for(var $i = 1; $i <= 8; $i++) {
                    obj['img' + $i] = {
                        pic : '/data/upload/shop/common/default_goods_image.gif',
                        link:'',
                        goods_name:'',
                        des:'',
                        price:''
                    }
                }
                floors.items.push(obj);
            }else if(floor == 9){
                floors.items.push(obj);
            }
        },

        add_goods : function(item) {
            var obj = {
                pic:'/data/upload/shop/common/default_goods_image.gif',
                link:'',
                goods_name:'',
                price: '',
                show: '0'
            }
            item.push(obj);
        }

    });

    var items   = <?php echo json_encode($items);?>;
    var items_l = items.length;
    for(var i = 0; i < items_l ; i++) {
        floors.items.push(items[i]);
    }
    var temp = null;
    var temp1 = null;


    function toggle(item){
        var index = item.index();
        for(var i = 0; i < floors.items.length; i++) {
            if(i == index){
                floors.items[i].show = 1;
            }
            else{
                floors.items[i].show = 0
            }
        }
        $(".head a").removeClass("selected");
        $(".head a").eq(index).addClass("selected")
    }

    
    $(document).on("dblclick",".head a",function(){
        $(this).addClass("change");
        if(temp===null){
            temp = $(this).index();
        }else{
            temp1 = $(this).index();
            floors.items = [];
            var a = items[temp];
            var b = items[temp1];
            items.splice(temp,1,b);
            items.splice(temp1,1,a);
            var items_l = items.length;
            for(var i = 0; i < items_l ; i++) {
                if(i!=temp1){
                    items[i].show = 0 
                }else{
                    items[i].show = 1; 
                }
                floors.items.push(items[i]);
            }
            temp = null;
            temp1 = null;
        }
    })

</script>
